<%@page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<%@page errorPage="/pages/error.jsp" %>
<%@taglib uri='/WEB-INF/tlds/cewolf.tld' prefix='cewolf' %>
<%@page import="java.util.ArrayList" %>
<%@page import="java.lang.String" %>
<%@page import="fr.ubdx1.jacomode.models.BarChartModel" %>
<%@page import="fr.ubdx1.jacomode.models.DataColorChart" %>


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>JACoMode</title>
        <meta name="author" content="Jonathan MERCIER, Louise-Amélie SCHMITT, Florence Maurier, Marianne Dussart, Nicolas Fontaine"/>
        <meta name="keywords" content="bioinformatique,bioinformatiques,bioinformatic,bioinformatics,open source,linux,software,logiciel,biologie,biology,ADN,DNA,protéine,proteomic,génomique,genomic,protéomique,proteomic,pathway,metatool,ACoM,JACoMode,Java,JEE,JSP,metabolic,network"/>
        <meta name="description" content="JACoMode it is a tool for analysis metabolic network"/>
        <meta name="ROBOTS" content="INDEX, FOLLOW"/>
        <link href="JACoMode.css" rel="stylesheet" type="text/css"/>
        <script type='text/javascript' src='/JACoMode/dwr/interface/Content.js'></script>
        <script type='text/javascript' src='/JACoMode/dwr/engine.js'></script>
        <script type='text/javascript' src='/JACoMode/dwr/util.js'></script>
        <script type="text/javascript" src='dynamicForward.js'></script>
        <script type="text/javascript" src='/overlib421/'></script>

    </head>
    <body>
        <div id="conteneur">
            <div id="header">
				<div class="hd"></div>
				<div class="bd"></div>
                <a href="index.jsp"><img src="IMAGES/JACoMode.png" width="270" height="60" alt="JACoMode.png"/></a><h2>Graphical frontend for ACoM</h2>
            </div>
                        <div id="left">
                <div class="hg"></div>
                <div class="hd"></div>
                <div class="bg"></div>
                <div class="bd"></div>
                <p class="titleCenter" >Menu</p>
                <a href="#" title="Process new file"    onclick="forward('acomForm')"           onmouseover="return overImage('process;NewFile')"       onMouseOut= "return outImage('processNewFile')"    ><img id="processNewFile"    src="IMAGES/buttons/processNewFile1.png"      width="180" height="46" alt="link to process new file web page" /></a><br/>
                <a href="resultTable" title="Table result"                                      onmouseover="return overImage('tableResult')"          onMouseOut= "return outImage('tableResult')"       ><img id="tableResult"       src="IMAGES/buttons/tableResult1.png"         width="180" height="46" alt="link to table result web page"     /></a><br/>
                <a href="#" title="Comparaison"         onclick="forward('compareForm')"        onmouseover="return overImage('compareStatistics')"    onMouseOut= "return outImage('compareStatistics')" ><img id="compareStatistics" src="IMAGES/buttons/compareStatistics1.png"   width="180" height="46" alt="link to statistics web page"       /></a><br/>
                <a href="#" title="Overall reaction"    onclick="forward('bilanForm')"          onmouseover="return overImage('overallReaction')"      onMouseOut= "return outImage('overallReaction')"   ><img id="overallReaction"   src="IMAGES/buttons/overallReaction1.png"     width="180" height="46" alt="link to overall reaction web page" /></a><br/>
                <a href="#" title="About JACoMode"      onclick="forward('about')"              onmouseover="return overImage('about')"                onMouseOut= "return outImage('about')"             ><img id="about"             src="IMAGES/buttons/about1.png"               width="180" height="46" alt="link to about web page"            /></a><br/>
        </div>
            <div id="center">
				<div class="hg"></div>
                <div class="hd"></div>
                <div class="bg"></div>
                <div class="bd"></div>
			<h1>Results</h1>
			<p>Click on the tabs to browse results.</p>
			<div class="menu1"> <!-- tabs box begin -->
            <a class="onglet" href="selectWichAcomSession"  title="Acom Session"            onclick="forward('selectWichAcomSession')">Acom Session</a> <!-- inactive tab -->
			<a class="onglet" href="acomGlobalResults"      title="Result Global"           onclick="forward('acomGlobalResults')">Global result</a> <!-- inactive tab -->
			<a class="onglet" href="acomResultsByMotifSize" title="Result by motif size"    onclick="forward('acomResultsByMotifSize')">By motif size</a><!-- inactive tab -->
			<span class="onglet onglet-actif">By efm</span> <!-- active tab -->
			<div class="spacer"></div> <!-- tabs box end -->
			</div>
			<fieldset>
                            <%
                            ArrayList<Integer> idEfm        = (ArrayList<Integer>)request.getAttribute("idEfm");
                            ArrayList<Integer> efmOccurence = (ArrayList<Integer>)request.getAttribute("efmOccurence");
                            int part = 1;
                            int width = (78+idEfm.size()*35);
                            %>
                            <center>
                            <%if (idEfm.size()>500){out.println("<div class='scroll2' align=center>");}
                               
                                for (int i=0;i<idEfm.size();i=i+500){
                                    //inclusion de la jsp%*/
                            %>
                                    
                                    <jsp:useBean id= "repeatChar" class="fr.ubdx1.jacomode.models.BarChartModel" scope="session"/>
                                    <% repeatChar.setX(idEfm);
                                    repeatChar.setY(efmOccurence);
                                    repeatChar.setPart(part);%>
                                    <jsp:include page="chart.jsp"/>
                            <%
                                part++;
                                }
                            if (width>800){out.println("</div>");}%>
                            </center>
				<p> Click on an efm number in the graph to
				show the EFM's properties in the field below.</p>
                <%

                    ArrayList<String> efmLocation   = (ArrayList<String>)request.getAttribute("efmlocation");
                    out.println("<script type=\"text/javascript\">");
                    out.print("var efmOccurence = [");
                    for (int i = 0; i < (efmOccurence.size()-1); i++)
                    {
                        out.print("\""+efmOccurence.get(i)+"\", ");
                    }
                    out.println("\""+efmOccurence.get( (efmOccurence.size()-1) )+"\"];");

                    out.print("var efmLocation = [");
                    for (int i = 0; i < (efmLocation.size()-1); i++)
                    {
                        out.print("\""+efmLocation.get(i)+"\", ");
                    }
                    out.println("\""+efmLocation.get( (efmLocation.size()-1) )+"\"];");
                    out.println("</script>");
                %>
                <br>EFM number:
                <select id="SelectId" onchange="showEfm(this.selectedIndex,efmOccurence,efmLocation)">
                    <option>Choose an EFM id</option>
                    <%
                        for(int i=0; i<idEfm.size(); i++)
                        {
                            out.println("<option>" + idEfm.get(i) + "</option>");
                        }
                    %>
                </select>
                <table border="1">
                    <th>EFM Occurence</th><th>EFM Location</th>
                    <tr><td id="occurence">  ---  </td><td id="location">  ---  </td></tr>
                </table>
			</fieldset>

			<p> Download results : <a href="download.tar.bz2" title="link">download archive (.tar.bz2) </a>

		</div>
            <div id="foot">
            </div>
        </div>
    </body>
</html>
